<!--齿轮渗碳-->
<!--目录：齿轮 齿齿轮渗碳、渗氮层深度计算-->
<template>
    <div style="width: 100%;height: 100%;font-size: 16px">
      <a-row style="width: 100%;height: 100%">
        <a-col :span="12" style="height: 98%">
          <div style="margin-left:2%;margin-top:2%;height: 96%;width: 96%;box-shadow: 1.5px 1.5px 2px #aaaaaa;border: 0.5px solid rgba(231, 231, 231, 0.486);border-radius: 3px;">
            <div style="margin:1%;height: 48%;width: 98%;box-shadow: 1.5px 1.5px 2px #aaaaaa;border: 0.5px solid rgba(231, 231, 231, 0.486);border-radius: 3px;">
              <div style="height: 5%;width: 100%;background-color: #D7D7D7;font-size: 18px">输入参数</div>
              <div style="height: 95%;width: 100%;margin-top:5%;display: flex">
                <div style="height: 100%;width: 50%;display: flex">
                  <div style="height: 100%;width: 45%">
                    <ul class="top_left_text" style="text-align: right">
                    <li>齿轮材料类型</li>
                    <li>小轮齿数</li>
                    <li>大轮齿数</li>
                    <li>模数</li>
                    <li>小轮节圆直径（mm）</li>
                  </ul>
                  </div>
                  <div style="height: 100%;width: 50%;margin-left: 5%">
                    <ul class="top_left_text">
                    <li>
                      <select v-model="p.material_type">
                        <option value="1">渗碳淬火</option>
                        <option value="2">氮化</option>
                      </select>
                    </li>
                    <li><input type="text" v-model="p.z_p"></li><!--小轮齿数-->
                    <li><input type="text" v-model="p.z_w"></li><!--大轮齿数-->
                    <li><input type="text" v-model="p.normal_module"></li><!--模数-->
                    <li><input type="text" v-model="p.diameter_pitch_p"></li><!--小轮节圆直径-->
                  </ul>
                </div>
              </div>
                <div style="height: 100%;width: 50%;display: flex">
                 <div style="height: 100%;width: 45%">
                  <ul class="top_left_text" style="text-align: right">
                    <li>啮合角（°）</li>
                    <li>基圆螺旋角（°）</li>
                    <li>小轮接触应力（MPa）</li>
                    <li>大轮接触应力（MPa）</li>
                    <li>质量等级</li>
                    <li v-if="p.material_type==2">硬度曲线</li><!--弹窗-->
                  </ul>
                 </div>
                 <div style="height: 100%;width: 50%;margin-left: 5%">
                  <ul class="top_left_text">
                    <li><input type="text" v-model="p.mesh_angle"></li><!--啮合角-->
                    <li><input type="text" v-model="p.base_helix_angle"></li><!--基圆螺旋角-->
                    <li><input type="text" v-model="p.sigma_H_fatigue_design_p"></li><!--小轮接触应力-->
                    <li><input type="text" v-model="p.sigma_H_fatigue_design_w"></li><!--大轮接触应力-->
                    <li>
                      <select v-model="p.quality_grade">
                        <option value="1">MQ或ME</option>
                        <option value="2">ML</option>
                      </select>
                    </li>
                    <li v-if="p.material_type==2">
                      <div style="height: 100%;width: 100%;display: flex">
                      <select v-model="p.hardness_curve">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                      </select>
                        <div style="width: 20%;height: 50%;background-color: #6DD400;text-align: center;border-radius: 8px"><buttom @click="open()">!</buttom></div>
                          <a-modal
                                   title="氮化齿轮的心部硬度系数UC"
                                   :visible="visible"
                                   @ok="handleOk()"
                                   @cancel="handleCancel()">
                            <img style="width: 100%" src="@/assets/image/image_12_2.jpg" />
                          </a-modal>
                      </div>
                    </li>
                  </ul>
                 </div>
              </div>
              </div>
            </div>
            <div style="height: 3%;width: 100%;text-align: right"><button class="comp" @click="tclick">计算</button></div>
            <div style="margin:1%;height: 45%;width: 98%;box-shadow: 1.5px 1.5px 2px #aaaaaa;border: 0.5px solid rgba(231, 231, 231, 0.486);border-radius: 3px;">
              <div style="height: 6%;width: 100%;background-color: #D7D7D7;font-size: 18px">输出参数</div>
              <div style="margin:2%;height: 92%;width: 96%;position: relative">
                <div v-if="this.p.material_type== 1" style="height: 100%;width: 100%;position: absolute">
                  <div style="height: 100%;width: 100%;display: flex">
                    <div style="height: 100%;width: 50%">
                      <ul class="button_text" style="text-align: right">
                        <li>防止点烛失效硬化层深度推荐Em Hot（mm）</li>
                        <li>防止断齿失效硬化层硬化层深度下限值Eht Fopt（mm）</li>
                        <li>防止断齿失效硬化层硬化层深度上限值Eht_Fopt（mm）</li>
                        <li>小轮防止齿面剥落硬化层深度推荐值 EhtC（mm）</li>
                        <li>大轮防止齿面剥落硬化层深度推荐值 EhtC（mm）</li>
                        <li>有效硬化层深度最大极限值 Eht_max（mm）</li>
                      </ul>
                    </div>
                    <div style="height: 100%;width: 45%;margin-left: 5%">
                      <ul class="button_text">
                        <li> {{ans.a}}</li>
                        <li>{{ans.b}} </li>
                        <li>{{ans.c}} </li>
                        <li>{{ans.d}} </li>
                        <li>{{ans.e}} </li>
                        <li>{{ans.f}} </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div v-if="this.p.material_type==2" style="height: 100%;width: 100%;position: absolute">
                  <div style="height: 100%;width: 100%;display: flex">
                    <div style="height: 100%;width: 45%">
                      <ul class="button_text" style="text-align: right">
                        <li>有效氮化层深度推荐值Nht(mm)</li>
                        <li>小轮防止齿面剥落氮化层深度推荐值Nht_C(mm)</li>
                        <li>大轮防止齿面剥落氮化层深度推荐值Nht_C(mm)</li>
                      </ul>
                    </div>
                    <div style="height: 100%;width: 50%;margin-left: 5%">
                      <ul class="button_text">
                        <li>参考右侧图表</li>
                        <li>{{ans.b}} </li>
                        <li>{{ans.c}} </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="12" style="height: 100%">
          <div style="margin-left:2%;margin-top:2%;height: 96%;width: 96%;box-shadow: 1.5px 1.5px 2px #aaaaaa;border: 0.5px solid rgba(231, 231, 231, 0.486);border-radius: 3px;">
            <div style="height: 4%;width: 100%;background-color: #D7D7D7;font-size: 20px;">氮化层深度推荐值</div>
            <div><img src="@/assets/image/image_12_1.jpg" style="margin: 10%;width: 80%"></div>
          </div>
        </a-col>
      </a-row>
    </div>
</template>
<script>

    import {case_depth} from "@/api/file";

    export default {
        created () {
            document.title = '齿轮渗碳、渗氮层深度计算'
        },
        data(){
            return{
                visible:false,
                p:{
                    material_type:1,
                    z_p:25,
                    z_w:42,
                    normal_module:2,
                    diameter_pitch_p:50,
                    mesh_angle:20,
                    base_helix_angle:8,
                    sigma_H_fatigue_design_p:1200,
                    sigma_H_fatigue_design_w:1200,
                    quality_grade:1,
                    hardness_curve:1
                },
                ans:{
                    a:"Text",
                    b:"Text",
                    c:"Text",
                    d:"Text",
                    e:"Text",
                    f:"Text",
                    Nht_C_p:"Text",
                    Nht_C_w:"Text"
                },
                res2:[],
                res:['Static Text', 'Static Text', 'Static Text', 'Static Text','Static Text','Static Text'],
                params: {
                    f:1,
                    z:2,
                    c:3
                }
            }
        },
        methods:{
          open()
          {
            this.visible=true;
          },
          handleOk()
          {
            this.visible=false;
          },
          handleCancel()
          {
            this.visible=false;
          },
            tclick()
            {
                console.log(this.p)
                case_depth(this.p)
                    .then(res => {
                        console.log(res)
                        this.ans.a=res[0];
                        this.ans.b=res[1];
                        this.ans.c=res[2];
                        this.ans.d=res[3];
                        this.ans.e=res[4];
                        this.ans.f=res[5];
                        this.ans.Nht_C_p=res[6];
                        this.ans.Nht_C_w=res[7];
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    };
</script>

<style scoped>
.top_left_text
{
  height: 100%;
  width: 100%;
}
.top_left_text li
{
  height: 15%;
  width: 100%;
}
.top_left_text input,.top_left_text select
{
  height: 50%;
  width: 80%;
}
.button_text
{
  height: 100%;
  width: 100%;
}
.button_text li
{
  height: 15%;
  width: 100%;
}
.comp
{
  width: 20%;
  height: 100%;
}
</style>
